// 引入变量和全局样式
@use "var.scss" as *;
@use "global.scss" as *;

.content-list {
    min-height: 31.25rem;
    padding: 0 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 将子项水平居中 */
    .section-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 2rem;
        /* 将子项水平居中 */
    }

    .content-item {
        width: calc(25% - 1.25rem);
        /* 设置子项宽度，减去外边距 */
        margin: 0.6rem;
        /* 为了在子项之间创建间距 */
        border-radius: 0.25rem;
        box-shadow: 0 0 0.3125rem 0.0625rem rgba(0, 0, 0, 0.1);
        position: relative;
        height: 25rem;
        border-radius: 1.3rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        transition: box-shadow 0.3s, transform 0.3s;
        min-width: 25rem;

        &:hover {
            box-shadow: 0 0 0.3125rem 0.125rem rgba(0, 0, 0, 0.3);
            transform: scale(1.1);
        }

        @media screen and (max-width: 768px) {
            width: 100%;
            /* 移动端每行只显示一个，宽度 100% */
            margin: 1rem;
            /* 使用相对单位 rem */
            max-height: 30rem;
            /* 设置最大高度 */
        }
    }
}

// 背景盒子
.article-thumbnail {
    height: 15rem;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 1.3rem;
    border-top-right-radius: 1.3rem;
}

.background-image {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(
            to bottom,
            rgba(32, 129, 100, 0.6),
            rgba(163, 75, 75, 0.6)
        ),
        url("https://static.linhaojun.top/aurora/articles/f7963a082ffe11e411b1514e4c35337c.jpg")
            center center no-repeat;
    background-size: cover;
    transition: opacity 0.3s ease-in-out;
}

// 内容类型的盒子
.type-container {
    z-index: 30;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    /* 调整小盒子的宽度 */
    height: 2.5rem;
    /* 调整小盒子的高度 */
    .type-item {
        width: 100%;
        height: 100%;
    }
}

// 时长的盒子
.duration-container {
    z-index: 30;
    color: rgb(255, 255, 255);
    position: absolute;
    bottom: 0.4rem;
    right: 1.5rem;
    width: 5rem;
    /* 调整小盒子的宽度 */
    height: 1.5rem;
    /* 调整小盒子的高度 */
    .duration-item {
        width: 100%;
        height: 100%;
    }
}

// 内容的盒子
.content-box {
    position: absolute;
    top: 13rem;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 1.4rem;
    padding-bottom: 0.2rem;
    box-sizing: border-box;
    //透明度的渐变background: linear-gradient(to bottom, rgba(14, 13, 13, 0), rgba(255, 255, 255, 0.952));
    border-bottom-left-radius: 1.3rem;
    border-bottom-right-radius: 1.3rem;
}

/* 可以根据需要调整 .content-box 的样式，比如文字颜色、字体大小等 */

// 内容
.sub-content-section .sub-author-section .sub-title-section .sub-tag-section {
    margin: 0.8rem 0.5rem;
    padding: 0.8rem;
}

// 标题盒子
.sub-title-section {
    font-size: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;

    a {
        border: none; //这个属性用于设置元素的边框。none表示不显示边框。
        color: #9cd0ed; //这个属性用于设置元素的文本颜色。currentColor表示使用当前的字体颜色。
        outline: 0; //这个属性用于设置元素的轮廓线。0表示不显示轮廓线。
        text-decoration: none; //这个属性用于设置元素的文本装饰效果，例如下划线、上划线、删除线等。none表示不显示任何装饰效果。
        overflow-wrap: break-word; //这个属性用于设置当文本超出元素宽度时如何处理。break-word表示在必要的地方自动换行，以防止文本溢出。
        word-wrap: break-word; //这个属性用于设置当单词超出元素宽度时如何处理。break-word表示在必要的地方自动换行，以防止单词溢出。
        transition: all 0.2s ease-in-out 0s; //这个属性用于设置元素样式的过渡效果。all表示对所有可改变的样式属性应用过渡效果，.2s表示过渡时间为0.2秒，ease-in-out表示过渡效果是平滑的（开始和结束时速度较慢，中间时速度较快），0s表示过渡延迟时间为0秒。
        cursor: pointer; //这个属性用于设置鼠标指针在元素上悬停时的形状。pointer表示鼠标指针将变为手形，表示可以点击或交互
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(237, 118, 137, 0.9);
        width: 100%;
        transition: color 0.3s ease;
        /* 添加渐变效果 */
    }

    a:hover {
        color: #9cd0ed;
        /* 悬停时的颜色 */
    }
}

.tags-container {
    overflow: inherit;
}

// 标签盒子
.sub-tag-section {
    margin: 0.5rem 0;
}

// 标签
.tag-item {
    color: #c94e5d;
    border: none;
    outline: 0;
    text-decoration: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
    transition: all 0.2s ease-in-out 0s;
    cursor: pointer;
    margin-right: 1rem;
}

// 内容盒子
.sub-section-content {
    margin: 0.3rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 1rem;
    height: 4rem;
    width: 100%;
}

.sub-author-section {
    margin-top: 1rem;
    display: flex;
}

// 作者
.author {
    border: none;
    color: currentColor;
    outline: 0;
    text-decoration: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
    transition: all 0.2s ease-in-out 0s;
    cursor: pointer;
    // font-size: 0.8rem;
    max-width: calc(100% - 7rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.author:hover {
    color: #61b5c7;
}

// 创建时间
.create-time {
    margin-left: 1rem;
    // font-size: 0.7rem;
    max-width: 5rem;
    //overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.corner-link {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    background: linear-gradient(
        to right,
        rgba(241, 139, 179, 0.8),
        rgba(240, 163, 135, 0.8)
    );
    border-top-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.night-mode .corner-link {
    color: #fff;
}

.night-mode .content-box {
    background: linear-gradient(
        to bottom,
        rgba(14, 13, 13, 0.884),
        rgba(5, 5, 5, 0.952)
    );
    color: #ffffff;
}
